<template>
	<view class="evaluation-container">
		<!-- 评估收缩面板列表 -->
		<view class="evaluation-list">
			<view class="evaluation-item" v-for="(item, index) in evaluationList" :key="index">
				<view class="evaluation-header" @click="togglePanel(index)">
					<text class="date">{{ item.tsCreatetime }}</text>
					<text class="arrow" :class="{ open: openIndex === index }">▼</text>
				</view>
				<view v-show="openIndex === index" class="evaluation-content">
					<!-- 评估类型 -->
					<view class="type-section">
						<text class="type-label">评估类型：</text>
						<text class="type-value">{{ item.tsType == 1? '学习评估' : item.tsType == 2? '心理评估' : '智能评估' }}</text>
					</view>
					<!-- 评估分数和等级 -->
					<view class="score-summary">
						<text class="score-label">评估分数：</text>
						<text class="score-value">{{ item.tsScore }}分/10分</text>
						<text class="level-label">评估等级：</text>
						<text class="level-value">{{ getLevel(item.tsLevel) }}</text>
					</view>
					<!-- 评分卡片（静态标签+动态分数） -->
					<view class="score-card">
						<view class="score-item">
							<text class="label">学习态度</text>
							<text class="value" :class="getScoreClass(item.saScore)">{{
								item.saScore }}分</text>
						</view>
						<view class="score-item">
							<text class="label">学习效果</text>
							<text class="value" :class="getScoreClass(item.seScore)">{{
								item.seScore }}分</text>
						</view>
						<view class="score-item">
							<text class="label">综合评分</text>
							<text class="value" :class="getZonghe(item.saScore,item.seScore)">{{
								 getZonghe1(item.saScore,item.seScore) }}分</text>
						</view>
					</view>

					<!-- 评语 -->
					<view class="comment-section">
						<text class="section-title">评估意见</text>
						<text class="comment-text">{{ item.tsContent }}</text>
					</view>
					<!-- 评估人 -->
					<view class="evaluator-section">
						<text class="evaluator">评估人：{{ item.tName }}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 暂无数据 -->
		<view class="empty" v-if="evaluationList.length === 0">
			<image src="/static/empty.png" mode="aspectFit"></image>
			<text>暂无评估记录</text>
		</view>
	</view>
</template>

<script setup>
import { reactive, toRefs } from 'vue'
import {getassessList} from '@/api/assess.js'
const state = reactive({
	openIndex: -1,
	evaluationList: []
})

getlist()
function getlist(){
	console.log(uni.getStorageSync('student'))
	let sid = uni.getStorageSync('student').sSid
	let sname = uni.getStorageSync('student').sName
	let major = uni.getStorageSync('student').sSpecialized
	let grade = uni.getStorageSync('student').sGrade
	getassessList(sid,sname,major,grade).then(res=>{
		if(res.code == 1){
			state.evaluationList = res.data
		}
	})
}

function togglePanel(index) {
	state.openIndex = state.openIndex === index ? -1 : index
}

function getScoreClass(score) {
	if (score >= 90) return 'excellent'
	if (score >= 80) return 'good'
	if (score >= 60) return 'normal'
	return 'poor'
}

function getLevel(score) {
	if (score == 1) return '正常'
	if (score == 2) return '轻度'
	if (score == 3) return '中度'
	if (score == 4) return '重度'
	return '严重'
}

function getZonghe(saScore,seScore){
	let score = (saScore + seScore) / 2
	if (score >= 90) return 'excellent'
	if (score >= 80) return 'good'
	if (score >= 60) return 'normal'
	return 'poor'
}

function getZonghe1(saScore,seScore){
	let score = (saScore + seScore) / 2
	return score
}

const {
	openIndex,
	evaluationList,
} = toRefs(state)
</script>

<style lang="scss">
page {
	background-color: #f5f5f5;
}

.evaluation-container {
	padding: 30rpx;

	.evaluation-list {
		.evaluation-item {
			background-color: #fff;
			border-radius: 12rpx;
			margin-bottom: 20rpx;
			overflow: hidden;
			box-shadow: 0 2rpx 8rpx rgba(17, 151, 144, 0.04);

			.evaluation-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 30rpx;
				cursor: pointer;

				.date {
					font-size: 32rpx;
					color: #333;
					font-weight: 500;
				}

				.arrow {
					font-size: 28rpx;
					color: #119790;
					transition: transform 0.2s;
				}

				.arrow.open {
					transform: rotate(180deg);
				}
			}

			.evaluation-content {
				padding: 0 30rpx 30rpx 30rpx;

				.type-section {
					margin-bottom: 20rpx;

					.type-label {
						font-size: 26rpx;
						color: #666;
					}

					.type-value {
						font-size: 26rpx;
						color: #119790;
						margin-left: 10rpx;
					}
				}

				.score-summary {
					margin-bottom: 20rpx;

					.score-label {
						font-size: 26rpx;
						color: #666;
					}

					.score-value {
						font-size: 26rpx;
						color: #119790;
						margin-right: 20rpx;
					}

					.level-label {
						font-size: 26rpx;
						color: #666;
						margin-left: 10rpx;
					}

					.level-value {
						font-size: 26rpx;
						color: #faad14;
						margin-left: 10rpx;
					}
				}

				.score-card {
					display: flex;
					flex-wrap: wrap;
					background-color: #f8f8f8;
					border-radius: 8rpx;
					padding: 20rpx;
					margin-bottom: 30rpx;

					.score-item {
						width: 50%;
						text-align: center;
						margin-bottom: 20rpx;

						&:nth-last-child(-n+2) {
							margin-bottom: 0;
						}

						.label {
							font-size: 24rpx;
							color: #666;
							display: block;
							margin-bottom: 10rpx;
						}

						.value {
							font-size: 36rpx;
							font-weight: bold;

							&.excellent {
								color: #52c41a;
							}

							&.good {
								color: #119790;
							}

							&.normal {
								color: #faad14;
							}

							&.poor {
								color: #ff4d4f;
							}
						}
					}
				}

				.section-title {
					font-size: 28rpx;
					color: #666;
					margin-bottom: 16rpx;
					display: block;
				}

				.comment-section {
					.comment-text {
						font-size: 28rpx;
						color: #333;
						line-height: 1.6;
					}
				}

				.evaluator-section {
					margin-top: 20rpx;

					.evaluator {
						font-size: 26rpx;
						color: #666;
					}
				}
			}
		}
	}

	.empty {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding-top: 200rpx;

		image {
			width: 200rpx;
			height: 200rpx;
			margin-bottom: 20rpx;
		}

		text {
			font-size: 28rpx;
			color: #999;
		}
	}
}
</style>